<template>
    <div>
        <el-row class="image-row">
            <div v-for="item in posterImageList" :key="item">
                <el-image :src="item" :preview-src-list="posterImageList" :hide-on-click-modal="true" fit="contain"></el-image>
            </div>
        </el-row>
        <h2 style="text-align: center" v-if="posterImageList.length <= 0">还未上传快报</h2>
    </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import axios from 'utils/axios.js'

const posterImageList = ref([])

onBeforeMount(async () => {
    const res = await axios.get('/imageList/poster')
    posterImageList.value = res.data
})
</script>

<style scoped>
.image-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.el-image {
    box-sizing: border-box;
    margin: 10px 10px;
    width: 600px;
    height: 400px;
}
</style>
